<template>
  <div id="container">
    <!-- 查询表单 -->
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
        <el-form-item label="订单号">
          <el-input v-model="form.saleNumber" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
          <el-button @click="onClear('form')" icon="el-icon-close">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div>
      <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" height="500">
        <el-table-column prop="id" label="订单编号" sortable width="150px"></el-table-column>
        <el-table-column prop="updateTime" sortable label="更新时间"></el-table-column>
        <el-table-column label="商品" prop="itemNumberDTOS" type="expand">
          <!-- 展开子表格 -->
          <template slot-scope="scope">
            <el-table :data="scope.row.itemNumberDTOS">
              <el-table-column prop="itemId" label="商品编号"></el-table-column>
              <el-table-column prop="itemName" label="商品名称"></el-table-column>
              <el-table-column prop="number" label="数量"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="总金额"></el-table-column>
        <el-table-column prop="description" label="备注"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250px">
          <template slot-scope="scope">
            <!-- <el-button @click="handleDelClick(scope.row)" type="text" size="small">删除</el-button> -->
            <!-- <el-button @click="handleEditClick(scope.row)" type="text" size="small">编辑</el-button> -->
            <el-button @click="handleSwapClick(scope.row)" type="text" size="small"
            :disabled="scope.row.description==='进货单'?true:false"
            >退货</el-button>
            <el-button
              @click="handlePayClick(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.isPayed===1?true:false"
              :class="addClassStatus(scope.row.isPayed)"
            >{{scope.row.isPayed | filterIsPayed}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="margin-top: 10px;"
      background
      layout="sizes,prev, pager, next"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="[5, 10, 20, 40]"
      :current-page="pageNumber"
      :page-size="pageSize"
      :total="total"
    >
      <!-- pageNumber 和pageSize触发 -->
    </el-pagination>

    <!-- 支付弹窗 -->
    <el-dialog title="订单" :visible.sync="dialogSaleFormVisible">
      <el-form :model="saleForm" label-width="80px" ref="saleForm" :rules="rules">
        <el-row>
          <span v-show="false">订单编号:{{saleForm.saleId}}</span>
        </el-row>
        <el-row>
          <el-table :data="saleForm.saleTableData">
            <el-table-column property="itemId" label="商品编号" width="200"></el-table-column>
            <el-table-column property="itemName" label="商品名称" width="300"></el-table-column>
            <el-table-column label="商品数量" prop="number"></el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-form-item label="总金额" v-model="saleForm.tocalCount">
            <span class="statusFaile">{{saleForm.tocalCount}}￥</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="saleForm.payWay" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSaleFormVisible = false,closeSaleDialog('saleForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogSaleFormVisible = false,closeSaleDialog('saleForm'),payClick('id')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
//url前缀
const baseUrl = "http://47.102.99.195:8888";
export default {
  data() {
    return {
      form: {
        //查询表单
        saleNumber: ""
      },
      tableData: [], //表格数据
      total: 0,
      pageNumber: 1,
      pageSize: 10,
      dialogSaleFormVisible: false,
      saleForm: {
        //订单表单
        saleId: "",
        saleTableData: [],
        description: "",
        tocalCount: ""
      },
      options: [
        {
          value: "微信",
          label: "微信"
        },
        {
          value: "支付宝",
          label: "支付宝"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      saleForm: {
        //订单表单
        saleTableData: [],
        tocalCount: "",
        payWay: "" //支付方式
      },
      rules: {
        //弹窗的查询表单
        payValue: [
          { required: true, message: "请选择支付方式", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.getTableData(0);
  },
  methods: {
    getTableData(saleId) {
      axios
        .get(baseUrl + "/sale/searchSale", {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            saleId: saleId
          }
        })
        .then(res => {
          if (res.data.event === 0) {
            this.tableData = res.data.obj;
            this.total = res.data.maxCount;
          } else if (res.data.event === -1) {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        })
        .catch(function() {
          this.$message({
            type: "error",
            message: "获取订单列表失败"
          });
        });
    },
    /**
     * 提交查询
     */
    onSubmit() {
      this.getTableData(this.form.saleNumber);
      console.log(`submit!${this.form.saleNumber}`);
    },
    /**
     * 重置
     */
    onClear(form) {
      this.$refs[form].resetFields();
      //重置clear的正确方式
      this[form] = {}; //初始化表单
      this.getTableData(0);
      // if (this.$refs[form] !== undefined) {
      //   this.$refs[form].resetFields();
      // }
    },
    /**
     * 支付
     */
    payClick(form) {
      if (this.saleForm.payWay === "") {
        this.saleForm.payWay = "其他"; //空处理
      }
      //请求后台支付订单
      var tempform = {
        saleId: "",
        payWay: "",
        account: "0"
      };
      tempform.payWay = this.saleForm.payWay;
      tempform.saleId = this.saleForm.saleId;
      axios.post(baseUrl + "/sale/pay?", tempform).then(res => {
        if (res.data.event === 0) {
          this.$message({
            type: "success",
            message: "支付成功"
          });
          //刷新表格
          this.getTableData(0);
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    /**
     * 关闭弹窗触发
     */
    closeSaleDialog(form) {},
    handleEditClick(row) {
      console.log("编辑");
    },
    /**
     * 退货
     */
    handleSwapClick(row) {
      this.$confirm("此操作将永久删除订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.post(baseUrl + "/sale/return?", row).then(res => {
            if (res.data.event === 0) {
              this.$message({
                type: "success",
                message: "退货成功"
              });
              //刷新表格
              this.getTableData(0);
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    /**
     * 添加样式
     */
    addClassStatus(i) {
      switch (i) {
        case 0:
          return "statusFaile";
        case 1:
          return "statusSuccess";
      }
    },
    handlePayClick(row) {
      this.dialogSaleFormVisible = true;
      //传递数据给弹窗
      console.log(row);
      this.saleForm.saleId = row.id;
      this.saleForm.tocalCount = row.count;
      this.saleForm.saleTableData = row.itemNumberDTOS;
      //直接支付，请求后台
    },
    /**
     * 更改页码
     */
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      this.getTableData();
    },
    /**
     * 更改页数
     */
    handleSizeChange: function(size) {
      this.pageSize = size;
      this.getTableData();
    }
  },
  //本地过滤器
  filters: {
    /**
     * 显示是否在售卖中
     */
    filterIsPayed: function(value) {
      if (value === 0) {
        return "未支付";
      }
      if (value === 1) {
        return "已支付";
      }
    }
  }
};
</script>
<style>
.statusFaile {
  color: #f56c6c;
}
.statusSuccess {
  color: #67c23a;
}
</style>
